<template>
	<view>
		<view class="box">
			<image src="../../../static/images/cc/money.png" mode="widthFix" class="moneyImg" />
			<view class="money"><text>￥</text>{{money}}</view>
			<view class="describe">{{msg}}</view>
		</view>
		<view class="buttonBox">
			<view class="recharge" @click="recharge">充值</view>
			<view class="details" @click="details">明细</view>
			<view class="ensure" style="padding-bottom: 10rpx;" @click="withdraw_sure">转到钱包提现</view>
			<view class="ensure">保证金说明</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				money:'0.00',
				msg:'保证金已不足，为了不影响您接单，请及时补充',
			}
		},
		onLoad(){
			
		},
		onShow(){
			this.loadMoney();
		},
		methods: {
			withdraw_sure(){
				var that = this;
				uni.showModal({
					title: '提示',
					content: "保证金转出会导致保证金不足无法接单，是否确认转出",
					success: function (res) {
						if (res.confirm) {
							// pages/dispatch/bond/bond
							that.withdraw();
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			async withdraw(){
				await uni.request({
					url: '/dispatch/server/withdraw',
					data: {
					
					},
					success: res => {
						console.log(res);
						
						this.loadMoney();
						uni.showToast({
							title: '操作成功',
							duration: 2000
						});
					}
				});
			},
			async loadMoney() {
				// 获取列表
				await uni.request({
					url: '/dispatch/server/getDeposit',
					data: {
					
					},
					success: res => {
						console.log(res);
						this.money = res.data.money;
						this.msg = res.data.msg;
					}
				});
			},
			recharge() {
				uni.navigateTo({
					url: '/pages/dispatch/recharge/recharge'
				})
			},
			details() {
				uni.navigateTo({
					url: '/pages/dispatch/details/details'
				})
			},
		}
	}
</script>

<style>
	page {
		background-color: #ffffff;
	}

	.box {
		margin-top: 224rpx;
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
	}

	.moneyImg {
		width: 100rpx;
		height: 100rpx;
	}

	.money {
		width: 100%;
		text-align: center;
		margin-top: 46rpx;
		font-size: 60rpx;
		font-weight: 700;
	}

	text {
		font-size: 36rpx;
	}

	.describe {
		width: 100%;
		text-align: center;
		font-size: 26rpx;
		color: #84BD00;
		margin-top: 28rpx;
	}

	.buttonBox {
		position: fixed;
		bottom: 0;
		width: 750rpx;
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
		padding-bottom: env(safe-area-inset-bottom);
	}

	.recharge {
		width: 416rpx;
		height: 82rpx;
		border-radius: 50rpx;
		background-color: #84BD00;
		color: #ffffff;
		text-align: center;
		line-height: 82rpx;
	}

	.details {
		width: 416rpx;
		height: 82rpx;
		border-radius: 50rpx;
		background-color: #F7F7F7;
		color: #333333;
		text-align: center;
		line-height: 82rpx;
		margin-top: 50rpx;
		margin-bottom: 157rpx;
	}

	.ensure {
		width: 100%;
		text-align: center;
		font-size: 26rpx;
		color: #626CAC;
		padding-bottom: 104rpx;
	}
</style>